<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Document</title>

    <style>
        div.dlg {
            width: 668px;
            height: 608px;
            position: absolute;
            margin-left: -334px;
            margin-top: -304px;
            top: 50%;
            left: 50%;
            display: block;
            z-index: 2000;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        div.header {
            box-sizing: border-box;
            height: 50px;
            border: none;
            border-bottom: 1px solid #ccc;
            padding: 10px 10px 2px 30px;
        }

        div.hdTitle {
            float: left;
            border-bottom: 5px solid crimson;
            height: 100%
        }

        .close {
            float: right
        }

        /*关闭按钮*/
        .hdClose {
            width: 40px;
            height: 40px;
            position: relative;
        }

        .hdClose:before,
        .hdClose:after {
            content: '';
            position: absolute;
            top: 30%;
            width: 15px;
            height: 1px;
            background-color: #888;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .hdClose:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .main {
            width: 100%;
            height: 458px;
            padding: 20px
        }

        img {
            width: 110px !important;
            height: 111px !important;
            border: 1px solid #ccc;
            margin: 0 15px 20px 0;
            ;
            float: left;
        }

        img#imgUpload {
            cursor: pointer
        }

        .footer {
            width: 100%;
            height: 50px;
            /* border-top: 1px solid #ccc; */
        }

        .btn-gp {
            width: 150px;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div class="dlg">
        <div class="header">
            <div class="hdTitle">
                <span style="color:crimson;font:bolder">上传照片</span>
            </div>
            <div class="close">
                <div class="hdClose"></div>
            </div>
        </div>
        <div class="main" id="main">
            <img id="imgUpload" src="https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d">
            <input id="btnUpload" type="file" name="pic" accept="image/png,image/jpeg,image/jpg/" style="display:none">
        </div>
        <div class="footer">
            <div class="btn-gp">
                <button class="btn btn-danger btn-lg" id="submit">上传</button>
                <button class="btn btn-default btn-lg" id="cancel">取消</button>
            </div>
        </div>
    </div>

    <script>
       
        var res = [];
        $("#imgUpload").on('click', function () {
            $("#btnUpload").click();
        })

        $("#btnUpload").on('change', function (evt) {
            if (!window.FileReader) console.log('该浏览器不支持文件预览功能');
            console.log(evt);

            var file = evt.target.files[0];
            if (!file.type.match("image/[png|jpeg|jpg]")) {
                alert('上传的图片必修是png,gif,jpg格式的！');
                ev.target.value = ""; //显示文件的值赋值为空
            }

            var reader = new FileReader(); // 创建FileReader对象
            reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果

            reader.onload = function (e) {
                var tmp = '<img class="addImg" src="' + e.target.result + '">';
                console.log(tmp);
                $("#main").prepend(tmp);
                res.push(e.target.result);
            }

            $("#submit").on('click', function () {
                $.ajax({
                    url: "https://mp.toutiao.com/profile_v2/",
                    type: "post",
                    dataType: "string",
                    data: res.toString(),
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    success: function (data) {
                        alert("上传成功！");
                        var tmp =
                            '<img id="imgUpload" src="https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d">' +
                            '<input id="btnUpload" type="file" name="pic" accept="image/png,image/jpeg,image/jpg/" style="display:none">'
                        $("#main").html(tmp);
                    },
                    error: function () {
                        alert("上传失败，请重试！");
                    }
                });
            })

            $("#cancel").on('click', function () {
                var tmp =
                    '<img id="imgUpload" src="https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d">' +
                    '<input id="btnUpload" type="file" name="pic" accept="image/png,image/jpeg,image/jpg/" style="display:none">'
                $("#main").html(tmp);
            });
        });
    </script>
</body>

</html>